<template>
  <div class="centermiddle">
    <div class="center">
      <a-tabs default-active-key="1" :tab-position="tabPosition" style="height: 100%">
        <a-tab-pane key="1" tab="我的主页">
          <h1 style="text-align: left">个人信息</h1>
          <div class="userInfo">
            <p>昵称</p>
            <input type="text" id="username" v-model="userInfo.nickname">
            <p>手机号</p>
            <input type="text" id="phoneNumber" v-model="userInfo.mobile">
            <p>密码</p>
            <input type="password" name="" id="password" v-model="userInfo.password">
            <div class="pic">
              <img :src="userInfo.avatarUrl" alt="">
              <a-upload
                  style="float: left;margin-top: 230px;margin-left: -200px;"
                  name="file"
                  action="/api/pcUser/updata/userAvatar"
                  @change="handleChange"
                  :showUploadList="false"
              >
                <a-button > <a-icon type="upload" />上传头像</a-button>
              </a-upload>
            </div>

          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="我的课程">
          啥也没有
        </a-tab-pane>
        <a-tab-pane key="3" tab="我的订单">
          别看了，没有钱买
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "PersonalCenter",
  data() {
    return {
      tabPosition: 'left',
    };
  },
  methods: {
    callback(val) {
      (val);
    },
    handleChange(info) {
      if (info.file.status !== 'uploading') {
        (info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        // ()
        // this.picture=info.file.response.userInfo.avatarUrl
        this.$store.commit("changeUserInfo",{isLogin:true,userInfo:info.file.response.userInfo})
        this.$message.success(`头像上传成功`);
      } else if (info.file.status === 'error') {
        this.$message.error(`头像上传失败`);
      }
    },
  },
  created() {},
computed:{
  ...mapState({
    userInfo:"userInfo"
  }),
}
}
</script>

<style scoped lang="less">
.centermiddle {
  width: 100%;
  height: 803px;
  padding: 20px 10px;
  background-color: #eeeeee;

  .center {
    width: 1200px;
    height: 763px;
    margin: auto;
    background-color: #FFFFFF;
    padding: 20px;
    .userInfo{
      padding: 30px;
      overflow: hidden;
      input {
        width: 100%;
        height: 40px;
        border: 0;
        outline: 0;
        border-bottom: 1px solid gray;
        margin-bottom: 15px;
        //float: left;
      }

      p {
        font-size: 20px;
        font-weight: bold;
        text-align: left;
      }

      .pic {
        height: 300px;
        img {
          width: 200px;
          height: 200px;
          border-radius: 20px;
          float: left;
        }
      }
    }
  }
}


</style>